<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品管理</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #1989fa;
            --bg-color: #f5f5f5;
            --card-bg: #fff;
            --text-color: #333;
            --border-color: #eee;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--bg-color);
            color: var(--text-color);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .header {
            padding: 15px;
            background-color: var(--primary-color);
            color: white;
            text-align: center;
            font-size: 18px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header-title {
            flex: 1;
            text-align: center;
        }
        .add-btn {
            background: none;
            border: 1px solid white;
            color: white;
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 14px;
            cursor: pointer;
        }
        .search-bar {
            margin: 15px;
            display: flex;
            gap: 8px;
        }
        .search-input {
            flex: 1;
            padding: 10px 15px;
            border: 1px solid var(--border-color);
            border-radius: 20px;
            font-size: 14px;
        }
        .search-input:focus {
            outline: none;
            border-color: var(--primary-color);
        }
        .main-content {
            flex: 1;
            display: flex;
            padding: 0 15px 60px;
        }
        .category-sidebar {
            width: 100px;
            background: white;
            border-radius: 8px;
            padding: 10px 0;
            margin-right: 15px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            height: fit-content;
        }
        .category-item {
            padding: 12px 15px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .category-item.active {
            color: var(--primary-color);
            background-color: #ecf5ff;
        }
        .product-container {
            flex: 1;
        }
        .product-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 12px;
        }
        .product-item {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            transition: transform 0.2s;
        }
        .product-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 3px 8px rgba(0,0,0,0.15);
        }
        .product-image {
            width: 100%;
            height: 120px;
            object-fit: cover;
            background-color: #f8f8f8;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .product-image img {
            max-width: 100%;
            max-height: 100%;
        }
        .product-info {
            padding: 8px;
        }
        .product-name {
            font-size: 13px;
            margin-bottom: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #333;
        }
        .product-price {
            color: #ff6b6b;
            font-weight: 500;
            font-size: 14px;
            margin-bottom: 3px;
        }
        .product-stock {
            color: #999;
            font-size: 11px;
        }
        .nav-bar {
            position: fixed;
            bottom: 0;
            width: 100%;
            display: flex;
            background: white;
            border-top: 1px solid #eee;
            height: 50px;
        }
        .nav-item {
            flex: 1;
            text-align: center;
            padding: 8px 0;
            color: #666;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }
        .nav-item.active {
            color: #1989fa;
        }
        .nav-icon {
            font-size: 18px;
            margin-bottom: 2px;
        }
        .empty-tip {
            text-align: center;
            color: #999;
            margin-top: 40px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="header-title">商品管理</div>
        <a href="add-goods.html" class="add-btn">+ 添加商品</a>
    </div>
    
    <div class="search-bar">
        <input type="text" class="search-input" placeholder="搜索商品..." onkeyup="searchProducts(this.value)">
    </div>

    <div class="main-content">
        <div class="category-sidebar">
            <div class="category-item active" onclick="filterProducts('all')">全部商品</div>
            <div class="category-item" onclick="filterProducts('digital')">数码电子</div>
            <div class="category-item" onclick="filterProducts('clothing')">服装鞋包</div>
            <div class="category-item" onclick="filterProducts('beauty')">美妆护肤</div>
            <div class="category-item" onclick="filterProducts('food')">食品生鲜</div>
        </div>

        <div class="product-container">
            <div class="product-list">
                <div class="product-item" data-category="digital">
                    <div class="product-image">
                        <img src="images/phone.svg" alt="智能手机 Pro">
                    </div>
                    <div class="product-info">
                        <div class="product-name">智能手机 Pro</div>
                        <div class="product-price">¥4999.00</div>
                        <div class="product-stock">库存：50</div>
                    </div>
                </div>
                <div class="product-item" data-category="clothing">
                    <div class="product-image">
                        <img src="images/dress.svg" alt="时尚连衣裙">
                    </div>
                    <div class="product-info">
                        <div class="product-name">时尚连衣裙</div>
                        <div class="product-price">¥299.00</div>
                        <div class="product-stock">库存：100</div>
                    </div>
                </div>
                <div class="product-item" data-category="beauty">
                    <div class="product-image">
                        <img src="images/cream.svg" alt="精华面霜">
                    </div>
                    <div class="product-info">
                        <div class="product-name">精华面霜</div>
                        <div class="product-price">¥199.00</div>
                        <div class="product-stock">库存：80</div>
                    </div>
                </div>
                <div class="product-item" data-category="food">
                    <div class="product-image">
                        <img src="images/fruit.svg" alt="有机水果礼盒">
                    </div>
                    <div class="product-info">
                        <div class="product-name">有机水果礼盒</div>
                        <div class="product-price">¥168.00</div>
                        <div class="product-stock">库存：30</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="nav-bar">
        <a href="home.html" class="nav-item">
            <i class="nav-icon fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="goods.html" class="nav-item active">
            <i class="nav-icon fas fa-shopping-bag"></i>
            <span>商品</span>
        </a>
        <a href="orders/order-list.html" class="nav-item">
            <i class="nav-icon fas fa-file-alt"></i>
            <span>订单</span>
        </a>
        <a href="settings/my-settings.html" class="nav-item">
            <i class="nav-icon fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>
</body>
</html>

    <script>
    function filterProducts(category) {
        // 更新分类选中状态
        document.querySelectorAll('.category-item').forEach(item => {
            item.classList.remove('active');
        });
        event.currentTarget.classList.add('active');

        // 过滤商品
        const items = document.querySelectorAll('.product-item');
        items.forEach(item => {
            if (category === 'all' || item.dataset.category === category) {
                item.style.display = '';
            } else {
                item.style.display = 'none';
            }
        });

        // 检查是否有显示的商品
        checkEmptyState();
    }

    function searchProducts(keyword) {
        keyword = keyword.toLowerCase();
        const items = document.querySelectorAll('.product-item');
        
        items.forEach(item => {
            const name = item.querySelector('.product-name').textContent.toLowerCase();
            const currentCategory = document.querySelector('.category-item.active').textContent;
            const itemCategory = item.dataset.category;
            
            // 同时匹配关键词和当前选中的分类
            const matchesCategory = currentCategory === '全部商品' || itemCategory === currentCategory.toLowerCase();
            const matchesKeyword = name.includes(keyword);
            
            item.style.display = (matchesCategory && matchesKeyword) ? '' : 'none';
        });

        // 检查是否有显示的商品
        checkEmptyState();
    }

    function checkEmptyState() {
        const container = document.querySelector('.product-container');
        const items = document.querySelectorAll('.product-item');
        let hasVisibleItems = false;

        items.forEach(item => {
            if (item.style.display !== 'none') {
                hasVisibleItems = true;
            }
        });

        // 移除现有的空状态提示
        const existingTip = container.querySelector('.empty-tip');
        if (existingTip) {
            existingTip.remove();
        }

        // 如果没有可见的商品，显示空状态提示
        if (!hasVisibleItems) {
            const emptyTip = document.createElement('div');
            emptyTip.className = 'empty-tip';
            emptyTip.textContent = '暂无相关商品';
            container.appendChild(emptyTip);
        }
    }
    </script>
</body>
</html>